<script lang="ts" setup>
import SearchIcon from "@/components/icon/SearchIcon.vue";
import SerializeList from "@/components/serialize/SerializeList.vue";
import { ref } from "vue";

let year = ref(2022);

function changeYearFunc(num: number) {
  year.value = num;
}
</script>

<template>
  <div class=" bg-gray-50 h-screen ">
    <div class="flex w-screen h-24 items-center p-5 text-2xl text-gray-400 bg-white">

      <div class="serialize-nav text-center">
        <div class="bg-gray-100 mr-8 rounded-full px-5 py-2 " :class="year === 2022 ? 'active' : ''"
          @click="changeYearFunc(2022)">2022</div>
        <div class="bg-gray-100 mr-8 rounded-full px-5 py-2 " :class="year === 2021 ? 'active' : ''"
          @click="changeYearFunc(2021)">2021</div>
        <div class="bg-gray-100 mr-8 rounded-full px-5 py-2 " :class="year === 2020 ? 'active' : ''"
          @click="changeYearFunc(2020)">2020</div>
        <div class="bg-gray-100 mr-8 rounded-full px-5 py-2 " :class="year === 2019 ? 'active' : ''"
          @click="changeYearFunc(2019)">2019</div>
        <div class="bg-gray-100 mr-8 rounded-full px-5 py-2 " :class="year === 2018 ? 'active' : ''"
          @click="changeYearFunc(2018)">2018</div>
        <div class="bg-gray-100 mr-8 rounded-full px-5 py-2 " :class="year === 2017 ? 'active' : ''"
          @click="changeYearFunc(2017)">2017</div>
        <div class="bg-gray-100 mr-8 rounded-full px-5 py-2 " :class="year === 2016 ? 'active' : ''"
          @click="changeYearFunc(2016)">2016</div>
      </div>

      <SearchIcon class="ml-5" />
    </div>

    <div>

      <transition-group name="fade" >
        <SerializeList :year="2022" :key="2022" v-show="year === 2022" />
        <SerializeList :year="2021" :key="2021" v-show="year === 2021" />
        <SerializeList :year="2020" :key="2020" v-show="year === 2020" />
        <SerializeList :year="2019" :key="2019" v-show="year === 2019" />
        <SerializeList :year="2018" :key="2018" v-show="year === 2018" />
        <SerializeList :year="2017" :key="2017" v-show="year === 2017" />
        <SerializeList :year="2016" :key="2016" v-show="year === 2016" />
      </transition-group>
    </div>
  </div>
</template>

<style>
.serialize-nav {
  width: 95%;
  overflow: auto;
  white-space: nowrap;
}

.serialize-nav div {
  display: inline-block;
}

.serialize-nav .active {
  background-color: #2d2d2d;
  border-radius: 999px;
  color: white;
}

.serialize-nav::-webkit-scrollbar {
  display: none;
}

.serialize-img {
  height: 150px;
  width: 100%;
  border-radius: 10px 10px 0 0;
  object-fit: cover;
}

.bottom-border {
  border-radius: 0 0 10px 10px;
}

.serialize-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.fade-enter-from,
.fade-leave-to {
  /*定义进入开始和离开结束的透明度为0*/
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  /*定义进入结束和离开开始的透明度为1*/
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  /*定义进入和离开过渡状态的透明度变化的时间和变化曲线*/
  transition: opacity 1.5s ease;
}
</style>
